const $ = el => document.querySelector(el),
      gets = el => [...document.querySelectorAll(el)]
function renderList(){
    let xhr = new XMLHttpRequest()
    xhr.open('get','http://zyxcl.xyz/music/api//toplist/detail')
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                let data = JSON.parse(xhr.responseText)
                $('.box').innerHTML = data.list.map((item)=>{
                    return ` <div class="list" data-id="${item.id}">
                                <div class="tit">
                                    <div class="tit_left">
                                        <img src="${item.coverImgUrl}" alt="">
                                        <div>
                                            <h3>${item.name}</h3>
                                            <p>${item.playCount}</p>
                                        </div>
                                    </div>
                                    <div class="tit_right">${item.updateFrequency}</div>
                                </div>
                                <div class="content">
                                ${item.tracks.map((obj,i)=>{
                                    return`<div><strong>${i+1}.${obj.first}</strong>-${obj.second}</div>`
                                }).join('')}
                                </div>
                            </div>`
                }).join('')
                gets('.box div').forEach((list,i)=>{
                    list.addEventListener('click',()=>{
                        let id = list.getAttribute('data-id')
                        location.href = `./详情列表.html?id=${id}`
                    })
                })
            }
        }
    }
    xhr.send()
    
}
renderList()
function render(id){
    let xhr1 = new XMLHttpRequest()
    xhr1.open('get', `http://zyxcl.xyz/music/api/top/list?id=2809577409`)
    xhr1.onreadystatechange = () =>{
        if(xhr1.readyState === 4){
            if(xhr1.status === 200){
                console.log(xhr1.responseText)
            }
        }
    }
}
// console.log(gets('.box  div'))
